<template>
  <div class="settings-container">
    <!-- head return-->
    <van-nav-bar :title="$t('h.accPage.set.pageTitle')" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'acchome' })" />
      </template>
    </van-nav-bar>

    <div class="settings-list">
      <van-collapse v-model="activeNames" :accordion="true">
        <van-collapse-item :title="$t('h.accPage.set.userPic.title')" name="1" size="50%">
          <div class="img-box">
            <div class="head-img">
              <van-uploader v-model="fileList" :show-upload="false" />
            </div>
            <div class="camera-box">
              <van-uploader capture="camera" :after-read="afterRead" :preview-image="false">
                <van-icon name="photograph" />
                <span>{{ $t('h.accPage.set.userPic.camera') }}</span>
              </van-uploader>
            </div>
            <div class="photo-album">
              <van-uploader :after-read="afterRead" :preview-image="false">
                <van-icon name="photo" />
                <span>{{ $t('h.accPage.set.userPic.upload') }}</span>
              </van-uploader>
            </div>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.name.title')" name="2" :value="userinfo.name">
          <div class="name-box">
            <input type="text" placeholder="请输入姓名" />
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.username.title')" name="3" :value="userinfo.nickname">
          <div class="user-box">
            <input type="text" placeholder="请输入用户名" />
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item class="email" :title="$t('h.accPage.set.email.title')" name="4" :value="userinfo.email !== '' ? userinfo.email : '未绑定邮箱'">
          <div class="email-box">
            <input type="text" placeholder="请输入邮箱" />
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.tel.title')" name="5" :value="userinfo.user_tel" disabled>
          <div class="tel-box">
            <input type="Number" placeholder="请输入电话号码" />
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.IC.title')" name="6">
          <div class="IC-box">
            <input type="Number" placeholder="请输入IC编号" />
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.gender.title')" name="7" :value="userinfo.gender">
          <div class="sex-box">
            <van-radio-group v-model="gender" direction="horizontal">
              <van-radio name="男">{{ $t('h.accPage.set.gender.boy') }}</van-radio>
              <van-radio name="女">{{ $t('h.accPage.set.gender.girl') }}</van-radio>
            </van-radio-group>
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.lang')" name="8" :value="userinfo.language === 'zh-CN' ? '中文' : 'English'">
          <div class="lang-box">
            <van-radio-group v-model="language" direction="horizontal">
              <van-radio name="zh-CN">中文</van-radio>
              <van-radio name="en-US">English</van-radio>
            </van-radio-group>
            <button>{{ $t('h.accPage.set.enter') }}</button>
          </div>
        </van-collapse-item>

        <van-collapse-item :title="$t('h.accPage.set.version.title')" name="9" :value="userinfo.version">
          <span class="updata-box">更新优化了部分逻辑和性能</span>
        </van-collapse-item>
        <van-collapse-item :title="$t('h.accPage.set.security.title')" name="10" right-icon>
          <van-collapse v-model="children" accordion>
            <van-collapse-item title="设置密码" name="1">
              <div class="password-box">
                <div class="passw-input">
                  <div class="set-passw">
                    <input type="text" placeholder="请输入密码" />
                  </div>
                  <div class="again-passw">
                    <input type="text" placeholder="请确认密码" />
                  </div>
                </div>
                <div class="passw-btn">
                  <button>设置密码</button>
                </div>
              </div>
            </van-collapse-item>
            <van-collapse-item title="修改密码" name="2">
              <div class="password-box">
                <div class="passw-input">
                  <div class="old-passw">
                    <input type="text" placeholder="请输入原密码" />
                  </div>
                  <div class="new-passw">
                    <input type="text" placeholder="请输入新密码" />
                  </div>
                  <div class="again-passw">
                    <input type="text" placeholder="请确认新密码" />
                  </div>
                </div>
                <div class="passw-btn">
                  <button>修改密码</button>
                </div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="btn-box">
      <van-button type="primary" @click="logout" block>{{ $t('h.accPage.set.exit') }}</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Settings',
  data() {
    return {
      activeNames: '1',
      children: '0',
      language: 'zh-CN',
      gender: '男',
      fileList: [
        {
          url: require('@/assets/CNJMh.jpeg')
        }
      ]
    }
  },
  computed: {
    ...mapState({ userinfo: state => state.user.userinfo })
  },
  methods: {
    // 上传图片
    afterRead(file) {
      this.fileList = []
      this.fileList.push(file)
    },
    logout() {
      this.$load.start()
      this.$store.dispatch('logout').then(msg => {
        if (msg === 200) {
          this.$load.done()
          this.$router.replace({ name: 'login' })
          this.$toast.fail('退出成功')
        } else {
          this.$load.done()
          this.$toast.fail('退出失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.settings-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.settings-list {
  position: relative;
  overflow: hidden;
  top: 46px;
  width: 97%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 9px;
  z-index: 1;
  /deep/.van-cell__right-icon {
    margin-left: 0.9em;
  }
  /deep/.van-cell__value {
    color: #b0b0b0;
  }
  .img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    .head-img {
      overflow: hidden;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 0.06em solid #e3e3e3;
      margin-bottom: 0.6em;
      /deep/.van-uploader__input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
    }
    .camera-box,
    .photo-album {
      width: 90%;
      height: 30px;
      margin-top: 0.3em;
      border-bottom: 0.06em solid #e3e3e3;
      /deep/.van-icon-photo,
      .van-icon-photograph {
        margin-right: 0.6em;
      }
      /deep/.van-uploader {
        width: 100%;
        .van-uploader__input-wrapper {
          width: 100%;
        }
      }
    }
  }
  .email {
    /deep/.van-cell__value {
      color: #ffbf05;
    }
  }
  .name-box,
  .user-box,
  .email-box,
  .tel-box,
  .IC-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 33px;
    margin: 0.6em 0;
    input:nth-child(1) {
      border: 0.06em solid #b0b0b0;
      border-radius: 6px;
      width: 70%;
      height: 100%;
      margin-right: 1em;
      text-indent: 0.6em;
    }
    button:nth-child(2) {
      border: none;
      background-color: #ffbf05;
      border-radius: 6px;
      height: 100%;
      width: 60px;
      color: white;
      font-size: 0.9em;
    }
  }
  .updata-box,
  .sex-box,
  .lang-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 33px;
    margin: 0.6em 0;
    button:nth-child(2) {
      border: none;
      background-color: #ffbf05;
      border-radius: 6px;
      height: 100%;
      width: 60px;
      color: white;
      font-size: 0.9em;
    }
    .van-radio-group {
      margin-right: 1em;
      margin-left: 1em;
    }
    /deep/.van-radio__icon--checked .van-icon {
      background-color: #ffbf05;
      border: #ffbf05;
    }
  }
  /deep/ .van-collapse-item__content {
    padding: 3px 15px;
    .password-box {
      display: flex;
      width: 100%;
      .passw-input {
        height: 100%;
        width: 70%;
      }
      .passw-btn {
        display: flex;
        justify-content: center;
        height: 100%;
        width: 30%;
        button {
          position: absolute;
          border: none;
          background-color: #ffbf05;
          border-radius: 6px;
          height: 33px;
          width: 66px;
          // bottom: 0;
          margin: 0.6em 0;
          color: white;
          font-size: 0.9em;
        }
      }
      .set-passw,
      .again-passw,
      .old-passw,
      .new-passw {
        display: flex;
        align-items: center;
        width: 100%;
        height: 33px;
        margin: 0.6em 0;
        input:nth-child(1) {
          border: 0.06em solid #b0b0b0;
          border-radius: 6px;
          height: 100%;
          width: 96%;
          text-indent: 0.6em;
        }
      }
    }
  }
}
.btn-box {
  display: flex;
  justify-content: center;
  position: relative;
  top: 44px;
  width: 100%;
  height: 150px;
  background-color: #ededed;
  .van-button--primary {
    position: absolute;
    top: 20px;
    width: 97%;
    border-radius: 9px;
    border: none;
    background-color: #ffbf05;
  }
}
</style>
